<template>
  <section class="app-container">
    <my-header :bgColor="bgColor" :color="color" :title="title"></my-header>
    <my-goods v-for="item in list" :key="item.id" :goods="item"></my-goods>
    <my-footer :goods="list"></my-footer>
  </section>
</template>

<script>
// 导入组件
import MyHeader from "./components/MyHeader.vue";
import MyGoods from "./components/MyGoods.vue";
import MyFooter from "./components/MyFooter.vue";

export default {
  // 注册组件
  components: {
    MyHeader,
    MyGoods,
    MyFooter,
  },
  data() {
    return {
      bgColor: "yellow",
      color: "teal",
      title: "购物车案例",
      list: [],
    };
  },
  created() {
    this.$axios({ url: "/api/cart" }).then(({ data: res }) => {
      // console.log(res.list);
      this.list=res.list
    });
  },
};
</script>

<style lang="less" scoped>
.app-container {
  padding: 45px 0 50px 0;
}
</style>
